<template>
	<view class="container">
		<uni-forms class="query-content" ref="queryForm" :modelValue="queryParams">
			<uni-forms-item label="统计维度" label-width="85">
				<uni-data-select v-model="queryParams.caseType" :localdata="tjwdOptions" @change="tjwdChange"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="部件类型" label-width="85">
				<uni-data-picker v-model="queryParams.caseTypeLevel1" :localdata="bjlxOptions" @change="bjlxChange" @nodeclick="bjlxNodeChange"></uni-data-picker>
			</uni-forms-item>
		</uni-forms>
		
		<uni-section title="案件上报统计" type="line">
			<view class="charts-box">
			    <qiun-data-charts type="line" :chartData="chartData" />
			</view>
		</uni-section>
		<uni-section title="区域部件统计" type="line">
			<view class="charts-box">
			    <qiun-data-charts type="line" :chartData="chartData1" />
			</view>
		</uni-section>
	</view>
</template>

<script>
	import { listAmCaseTypeAll } from '@/api/dums/gov/caseType/caseType'
	import { leaderList } from '@/api/dums/caw/stat/leaderStat'
	export default {
		data() {
			return {
				tjwdOptions:[],
				bjlxOptions:[],
				queryParams:{
					type:"reportForEvent"
				},
				chartData: {},
				chartData1: {},
			}
		},
		onLoad() {
			listAmCaseTypeAll({parentId: "00"}).then(res=>{
				if(res){
					this.tjwdOptions = res.map((item,i)=>{
						if(i==0){
							this.queryParams.caseType = item.caseTypeId
							this.tjwdChange(item.caseTypeId)
							this.getServerData();
						}
						return {
							text:item.caseTypeName,
							value:item.caseTypeId
						};
					});
				}
			});
		},
		methods: {
			tjwdChange(e){
				this.getServerData();
				listAmCaseTypeAll({params:{caseType:e}}).then(res=>{
					if(res){
						let arr = res.map((item,i)=>{
							return {
								text:item.caseTypeName,
								value:item.caseTypeId,
								caseTypeId:item.caseTypeId,
								parentId:item.parentId
							};
						});
						this.bjlxOptions = this.handleTree(arr, "caseTypeId");
					}
				});
			},
			bjlxChange(e){
				this.getServerData();
			},
			bjlxNodeChange(e){
				if(e.parentId !== '00'){
					this.queryParams.caseTypeLevel1 =  e.value;
				}
				this.getServerData();
			},
			getServerData() {
				console.log(JSON.stringify(this.queryParams));
				leaderList(this.queryParams).then(res => {
					let chart = {
						categories: res.reportList.map(item => {
							return item.name
						}),
						series: [
						  {
							name: "事件上报数",
							data: res.reportList.map(item => {
									return item.value
								})
						  }
						]
					};
					this.chartData = JSON.parse(JSON.stringify(chart));
					
					//过滤name为null的对象
					let areaList = res.areaList.filter(item => {
						if(item.NAME!=null)
						return item.NAME
					});
					console.log(areaList);
					let chart1 = {
						categories: areaList.map(item => {
										return item.NAME
									}),
						series: [
						  {
							name: "部件总数",
							data: areaList.map(item => {
									  return item.ZS
								  })
						  }
						]
					};
					this.chartData1 = JSON.parse(JSON.stringify(chart1));
				})
			},
		}
	}
</script>

<style>
.query-content{
	padding: 10px;
}
.charts-box {
	width: 100%;
	height: 300px;
}
</style>
